<template>
  <div class="w-full">
    <Hero />
    <main class="max-w-[1200px] mx-auto px-4 lg:px-8 pb-12">
      <div class="mt-4">
        <Filters />
      </div>
      <div class="mt-4">
        <RoleGrid ref="roleGridRef" :category="category" :keyword="keyword" />
      </div>
      <LoadMore 
        v-if="roleGridRef"
        :hasMore="roleGridRef.hasMore"
        :isLoadingMore="roleGridRef.isLoadingMore"
        :onLoadMore="roleGridRef.loadMore"
      />
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import Hero from '@/components/explore/Hero.vue'
import Filters from '@/components/explore/Filters.vue'
import RoleGrid from '@/components/explore/RoleGrid.vue'
import LoadMore from '@/components/explore/LoadMore.vue'

const route = useRoute()
const roleGridRef = ref<InstanceType<typeof RoleGrid>>()

// 从路由参数中获取分类和搜索关键词
const category = computed(() => {
  return route.query.category as string || ''
})

const keyword = computed(() => {
  return route.query.keyword as string || ''
})
</script>

